<template>
	<a-watermark class="watermark" content="趣貓坞" grayscale>
		<a-page-header @back="back" :style="{ background: 'var(--color-bg-2)' }" title="方案详情" />
		<a-alert type="success">您提交的方案已录入方案库，专家正在评选中。</a-alert>
		<view :style="{ padding: '20px' }">
			<a-form size="large" layout="vertical" :model="form">
				<a-form-item label="您的姓名">
					<a-input v-model="form.name" readonly />
				</a-form-item>
				<a-form-item label="手机号码">
					<a-input v-model="form.phone" readonly />
				</a-form-item>
				<a-form-item label="您的身份">
					<a-input v-model="form.tag" readonly />
				</a-form-item>
				<a-form-item label="方案图片">
					<a-image-preview-group >
						<view class="img-box" >
							<a-image v-for="img in form.infoImageList" :key="img" width="100%" height="200px" fit="cover" :src="img" show-loader />
						</view>
					</a-image-preview-group>
				</a-form-item>
				<a-form-item v-if="form.video" label="方案视频">
					<video style="width:100%" :src="form.video" enable-danmu></video>
				</a-form-item>
			</a-form>
		</view>

	</a-watermark>
</template>

<script setup>
	import TaskApi from '@/Api.js'
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const form = ref({});

	onLoad((option) => {
		const id = option.id || 0;
		TaskApi.GetJoinInfo(id).then(res => {
			form.value = res.data
			console.log(res.data)
		})
	});

	const back = () => {
		history.back()
	}
</script>

<style scoped lang="scss">
	.watermark {
		background: var(--color-bg-2);
	}

	.img-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 12px;
	}
</style>